﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/template-with-tabs.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="pageTitle" -->
    <title>EzDesk - 消息</title>
    <!-- InstanceEndEditable -->

<link href="Content/jquery-ui.custom.css" rel="stylesheet" type="text/css" />
<link href="Content/fullcalendar.css" rel="stylesheet"  type="text/css" />
<link href="Content/table_jui.css" rel="stylesheet" type="text/css"/>
<link href="Content/ui.textbox.css" type="text/css" rel="stylesheet"  media="all" />
<link href="Content/Site.css" rel="stylesheet" type="text/css" />

<script src="Scripts/ezdesk_mockdata.js" type="text/javascript"></script>

<script src="Scripts/jquery.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui.custom.min.js" type="text/javascript"></script>   
<script src="scripts/fullcalendar.js" type="text/javascript"></script>
<script src="Scripts/jquery.dataTables.js" type="text/javascript"></script>   
<script src="Scripts/jquery.form.js" type="text/javascript"></script>
<script src="Scripts/ui.textbox.js" type="text/javascript"></script>
<script src="Scripts/jquery.poshytip.js" type="text/javascript"></script>

    <script src="Scripts/json.js" type="text/javascript"></script>
    <script src="Scripts/pinyin.js" type="text/javascript"></script>

    <script src="Scripts/ezdesk-jquery-ui.js" type="text/javascript"></script>
    <script src="Scripts/ezdesk_common.js" type="text/javascript"></script>
        
	<!-- InstanceBeginEditable name="pageStyles" -->
    <style type="text/css"></style>
    <!-- InstanceEndEditable -->

</head>

	<!-- InstanceBeginEditable name="pageScripts" -->
<script type="text/javascript">
    //************* URL常量

    var URL_MESSAGE_CONFIRMMESSAGE = '/message/ConfirmMessage';
    var URL_MESSAGE_REPLYTOPIC = '/message/ReplyTopic';
    var URL_MESSAGE_REPLYSINGLEMESSAGE = '/message/ReplySingleMessage';

    //************* 全局变量

    var g_Var = {
        'currentTime': null,
        'messageId': null,
        'toReplyName': null,
        'confirmNameList': null,
        'notConfirmNameList': null
    };

    //************* 常量定义

    //************* Accessor访问器

    var EzAccessor = {};

    if (ezmock.IS_MOCKED) {
        var mock_currentTime = { "CurrentTime": 1348423559 };
        var mock_currentUser =
            {
                "Id": "55555",
                "Name": "加菲盐",
                "UserName": "yuxin",
                "Dept":
                    {
                        "Id": "bd3474a8-6c2d-43ef-bf42-b06827a216f6",
                        "DeptName": "软件工程",
                        "GroupId": "9ad96dac-88d8-4315-bfdb-9931c8f3cb7c"
                    }

            };

        var mock_message =
            {
                "Id": "33333",
                "NeedConfirm": true,
                "HasConfirmed": false,
                "SenderUser": {
                    "Id": "33333",
                    "Name": "加菲盐",
                    "UserName": "yuxin",
                    "Dept":
                        {
                            "Id": "bd3474a8-6c2d-43ef-bf42-b06827a216f6",
                            "DeptName": "软件工程",
                            "GroupId": "9ad96dac-88d8-4315-bfdb-9931c8f3cb7c"
                        }

                },
                "CreateOn": "1348423559",
                "Title": "发牢骚。",
                "MemberString": null,
                "Text": '&nbsp;&nbsp; &nbsp;<span style="font-size:x-large;"><strong><span style="color:#33FF33;"> &nbsp;8月的尾巴了。2010年3月，美丽开始做DOTA的解说，4月，慢慢进入大家的视线。</span></strong></span>'
            };

        var mock_replyList = [

             ];

        var mock_nameList = [
            {
                "Id": "33333",
                "Name": "郭骥腾",
                "UserName": "yuxin",
                "Dept":
                    {
                        "Id": "bd3474a8-6c2d-43ef-bf42-b06827a216f6",
                        "DeptName": "软件工程",
                        "GroupId": "9ad96dac-88d8-4315-bfdb-9931c8f3cb7c"
                    }
            },
             {
                 "Id": "33333",
                 "Name": "王璐莹",
                 "UserName": "yuxin",
                 "Dept":
                    {
                        "Id": "bd3474a8-6c2d-43ef-bf42-b06827a216f6",
                        "DeptName": "设计",
                        "GroupId": "9ad96dac-88d8-4315-bfdb-9931c8f3cb7c"
                    }
             },

             {
                 "Id": "33333",
                 "Name": "王旭",
                 "UserName": "yuxin",
                 "Dept":
                    {
                        "Id": "bd3474a8-6c2d-43ef-bf42-b06827a216f6",
                        "DeptName": "策划",
                        "GroupId": "9ad96dac-88d8-4315-bfdb-9931c8f3cb7c"
                    }
             },
            {
                "Id": "33333",
                "Name": "陈露",
                "UserName": "yuxin",
                "Dept":
                    {
                        "Id": "bd3474a8-6c2d-43ef-bf42-b06827a216f6",
                        "DeptName": "设计",
                        "GroupId": "9ad96dac-88d8-4315-bfdb-9931c8f3cb7c"
                    }
            },
            {
                "Id": "33333",
                "Name": "张鑫",
                "UserName": "yuxin",
                "Dept":
                    {
                        "Id": "bd3474a8-6c2d-43ef-bf42-b06827a216f6",
                        "DeptName": "设计",
                        "GroupId": "9ad96dac-88d8-4315-bfdb-9931c8f3cb7c"
                    }
            }];

        var mock_nameList1 = [
            {
                "Id": "11111",
                "Name": "马骥腾",
                "UserName": "yuxin",
                "Dept":
                    {
                        "Id": "bd3474a8-6c2d-43ef-bf42-b06827a216f6",
                        "DeptName": "软件工程",
                        "GroupId": "9ad96dac-88d8-4315-bfdb-9931c8f3cb7c"
                    }
            },
             {
                 "Id": "22222",
                 "Name": "陈璐莹",
                 "UserName": "yuxin",
                 "Dept":
                    {
                        "Id": "bd3474a8-6c2d-43ef-bf42-b06827a216f6",
                        "DeptName": "设计",
                        "GroupId": "9ad96dac-88d8-4315-bfdb-9931c8f3cb7c"
                    }
             },
             {
                 "Id": "55555",
                 "Name": "加菲盐",
                 "UserName": "yuxin",
                 "Dept":
                    {
                        "Id": "bd3474a8-6c2d-43ef-bf42-b06827a216f6",
                        "DeptName": "软件工程",
                        "GroupId": "9ad96dac-88d8-4315-bfdb-9931c8f3cb7c"
                    }

             }];

        var mockAccessor = {
            'doConfirmMessage': function (currentUser) {
                var stateInfo = { "State": "Success", "Info": "确认收到！", "Data": null };
                $.displayStateInfo(stateInfo);
                $('#remind').hide();
                //跟新确认名单
                $('#tbl_affirmNameList').empty();
                updateConfirmNameList(currentUser);
                showAffirmNameList(g_Var.confirmNameList);
                //更新为确认名单
                $('#tbl_notAffirmNameList').empty();
                updateNotConfirmNameList(currentUser);
                showNotAffirmNameList(g_Var.notConfirmNameList);

            },

            'doReplyTopic': function (topicId, currentUser) {
                addReply(currentUser);
            },
            'doReplySingleMessage': function (topicId, currentUser) {
                addReply(currentUser);
            },
            'getReplyList': function () {
                return mock_replyList;
            },
            'getConfirmNameList': function () {
                return mock_nameList;
            },
            'getNotConfirmNameList': function () {
                return mock_nameList1;
            },

            'getMessage': function () {
                return mock_message;
            },
            'getCurrentUser': function () {
                return mock_currentUser;
            },
            'getBasicInfo': function () {
                g_Var['currentTime'] = Date.fromEpoch(mock_currentTime["CurrentTime"]);
            }

        };


        EzAccessor = mockAccessor;

    } else {
        var realAccessor = {
            'doConfirmMessage': function (currentUser, topicId) {
                $(this).ajaxBusy('begin');
                $.post(URL_MESSAGE_CONFIRMMESSAGE,
            { 'topicId': topicId },
            function (e) {
                $('#remind').hide();
                $.displayStateInfo(e);

                //跟新确认名单
                $('#tbl_affirmNameList').empty();
                updateConfirmNameList(currentUser);
                showAffirmNameList(g_Var.confirmNameList);

                //更新为确认名单
                $('#tbl_notAffirmNameList').empty();
                updateNotConfirmNameList(currentUser);
                showNotAffirmNameList(g_Var.notConfirmNameList);

                $(this).ajaxBusy('end');
            });
            },

            'doReplyTopic': function (topicId, currentUser) {
                var replyText = htmlEncode($('#replyContent').val());
                var topicId = topicId;

                var isReplyToAll = false;
                if ($('#isReplyToAll').attr("checked") == true) {
                    isReplyToAll = true;
                }

                $.post(URL_MESSAGE_REPLYTOPIC, {
                    'replyText': replyText,
                    'topicId': topicId,
                    'isReplyToAll': isReplyToAll
                }, function (e) {
                    if (e.State == "Success") {
                        addReply(currentUser);
                    }
                    $(this).ajaxBusy('end');
                });

            },

            'doReplySingleMessage': function (topicId, currentUser) {
                var replyText = htmlEncode($('#replyContent').val());
                var topicId = topicId;
                var messageId = g_Var['messageId'];

                var isReplyToAll = false;
                if ($('#isReplyToAll').attr("checked") == true) {
                    isReplyToAll = true;
                }

                $.post(URL_MESSAGE_REPLYSINGLEMESSAGE, {
                    'messageId': messageId,
                    'topicId': topicId,
                    'replyText': replyText,
                    'isReplyToAll': isReplyToAll
                }, function (e) {
                    if (e.State == "Success") {
                        //增添留言
                        addReply(currentUser);
                    }
                    $(this).ajaxBusy('end');
                });

            },
            'getReplyList': function () {
                //return <%= ViewData["ReplyList"] %>;
            },
            'getConfirmNameList': function () {
                //return <%= ViewData["ConfirmNameList"] %>;
            },
            'getNotConfirmNameList': function () {
                //return <%= ViewData["NotConfirmNameList"] %>;
            },

            'getMessage': function () {
                //return <%= ViewData["Message"] %>;
            },
            'getCurrentUser': function () {
                //return <%= ViewData["CurrentUser"] %>;
            },
            'getBasicInfo': function () {
                //g_Var['currentTime'] = Date.fromEpoch(<%= ViewData["CurrentTime"] %>);
            }
        }
        EzAccessor = realAccessor;
    }


    //HtmlEncode
    function htmlEncode(str) {
        var div = document.createElement("div");
        var text = document.createTextNode(str);
        div.appendChild(text);
        return div.innerHTML;
    }


    //增添回复
    function addReply(currentUser) {
        $('#replyContainer').show();
        var replyText = $('#replyContent').val();
        var replyValue = replyText.htmlEncode();
        var name = currentUser.Name;
        var replyTime = g_Var['currentTime'].toChineseDateFormat() + " " + g_Var['currentTime'].toFullTimeFormat();

        var temp = '<dd style="width:430px; border-bottom: 1px solid #ffffff;"><span style="font-size: 16px; color:#2583AD;">{name} </span><span style="font-size: 12px; color: Gray;"> {time}</span><p style="font-size: 14px; color: #000000;">{message}</p></dd>';
        var example = temp.replace("{message}", replyValue)
                          .replace("{time}", replyTime)
                          .replace("{name}", name);

        $('#replyInfo').append(example);
        $('#replyContent').clearFields();
    }


    //更新确认名单
    function updateConfirmNameList(currentUser) {

        var userInfo = {};
        userInfo['Id'] = currentUser.Id;
        userInfo['Name'] = currentUser.Name;
        userInfo['Dept'] = {};
        userInfo['Dept']['DeptName'] = currentUser.Dept.DeptName;
        g_Var['confirmNameList'].push(userInfo);
    }



    //更新没有确认名单
    function updateNotConfirmNameList(currentUser) {

        for (var key in g_Var['notConfirmNameList']) {
            if (g_Var['notConfirmNameList'][key].Id == currentUser.Id)
                g_Var['notConfirmNameList'].splice(key);
        }

    }

    //showAffirmNameList
    function showAffirmNameList(nameList) {

        if (nameList.length == 0) {
            var temp = '<span>暂时没有人确认</span>';
            $('#tbl_affirmNameList').append(temp);

        } else {
            for (var key in nameList) {
                var temp = '<span>{name}({deptName}),&nbsp&nbsp</span>';
                temp = temp.replace("{deptName}", nameList[key].Dept.DeptName)
                                          .replace("{name}", nameList[key].Name);

                $('#tbl_affirmNameList').append(temp);

            }
        }
    }


    ///showNotAffirmNameList
    function showNotAffirmNameList(nameList) {
        if (nameList.length == 0) {
            var temp = '<span>所有人都已确认</span>';
            $('#tbl_notAffirmNameList').append(temp);
        } else {
            for (var key in nameList) {
                var temp = '<span>{name}({deptName}),&nbsp&nbsp</span>';
                temp = temp.replace("{deptName}", nameList[key].Dept.DeptName)
                           .replace("{name}", nameList[key].Name);

                $('#tbl_notAffirmNameList').append(temp);

            }
        }
    }



    ///showMessage
    function showMessage(messageInfo, currentUser) {
        var time = Date.fromEpoch(messageInfo.CreateOn);
        var CreateOn = time.toChineseDateFormat() + " " + time.toFullTimeFormat();
        var deptName = messageInfo.SenderUser.Dept.DeptName;
        var senderName = messageInfo.SenderUser.Name;

        $('#messageTitle').html(messageInfo.Title);
        $('#sendName').html(senderName);
        $('#deptName').html("(" + deptName + ")");
        $('#sendTime').html(CreateOn);
        $('#messageContent').html(messageInfo.Text);

        if (currentUser.Id != messageInfo.SenderUser.Id && messageInfo.NeedConfirm) {
            $('#isNeedConfirm').html('需要确认');
            if (!messageInfo.HasConfirmed) {
                $('#remind').show();
            }
        }
    }


    ///showReply
    function showReply(replyList) {

        if (replyList.length == 0) {
            $('#replyContainer').hide();
        } else {
            for (var key in replyList) {
                var time = Date.fromEpoch(replyList[key].CreateOn);
                var replyTime = time.toChineseDateFormat() + " " + time.toFullTimeFormat();
                var senderName = replyList[key].SenderUser.Name;
                var deptName = replyList[key].SenderUser.Dept.DeptName;
                var messageId = replyList[key].MessageId;

                var temp = '<dd id="{messageId}" style="width:430px; border-bottom: 1px solid #ffffff;"><span class="senderName" style="font-size: 16px; color:#2583AD;">{name} </span> <span class="deptName">({deptName})</span> <span style="font-size: 12px; color: Gray;"> {time}</span><p style="font-size: 14px; color: #000000">{message} <a href="#nogo">回复</a></p></dd>';
                temp = temp.replace("{message}", replyList[key].Text)
                           .replace("{messageId}", messageId)
                           .replace("{time}", replyTime)
                           .replace("{name}", senderName)
                           .replace("{deptName}", deptName);

                $('#replyInfo').append(temp);
            }
        }

    }

    ///
    function getName(container) {
        ///传入一个ddContainer
        ///返回姓名
        return name = $(container).find('.senderName').text();

    }
    ///chooseReciever
    function chooseReciever() {
        $('dd a').click(function () {
            var ddContainer = $(this).parent().parent();
            ///获得回复人姓名
            g_Var.toReplyName = getName(ddContainer);
            //获得该回复ID
            g_Var.messageId = $(ddContainer).attr("id");

            var replyMark = "回复" + g_Var.markName + ":" + " ";

            $("#replyContent").focus();
            $('#replyContent').text(replyMark);



        });

    }

    ///字符串匹配
    String.prototype.startWith = function (str) {
        if (str == null || str == "" || this.length == 0 || str.length > this.length)
            return false;
        if (this.substr(0, str.length) == str)
            return true;
        else
            return false;
        return true;
    }


    //取出字符串头空格
    function Trim(str) {
        if (str.charAt(0) == " " || str.charAt(0) == "\n") {
            str = str.slice(1);
            str = Trim(str);
        }
        return str;
    }

    //验证回复内容是否为空
    function isEmpty(str) {
        if (Trim(str) == "") {
            var stateInfo = { 'State': 'Error', 'Info': '回复不能为空!', 'Date': null };
            $.displayStateInfo(stateInfo);

            return false;
        }
        return true;
    }


    function initTime() {
        $(this).ajaxBusy();
        EzAccessor.getBasicInfo();
        var updateCurrentDateTime = function () {
            //从后台接受时间数
            var date = g_Var['currentTime'].toFullChineseDateFormat();
            var time = g_Var['currentTime'].toFullTimeFormat();


        }

        var refreshCurrentTime = function () {
            // 时间加1
            g_Var['currentTime'] = new Date(
				g_Var['currentTime'].getFullYear(),
				g_Var['currentTime'].getMonth(),
				g_Var['currentTime'].getDate(),
				g_Var['currentTime'].getHours(),
				g_Var['currentTime'].getMinutes(),
				g_Var['currentTime'].getSeconds() + 1
				);

            updateCurrentDateTime();
        }

        refreshCurrentTime();
        setInterval(refreshCurrentTime, 1000);
    }

    function initPageEvent() {

        var currentUser = EzAccessor.getCurrentUser();
        var message = EzAccessor.getMessage();

        $('#btnSubmit').click(function () {

            var replyContent = $('#replyContent').val();
            var toReplyString = "回复" + g_Var.toReplyName + ":";
            var isReplayToAll = replyContent.startWith(toReplyString);

            var replayConfirm = isEmpty(replyContent);

            if (replayConfirm) {
                if (g_Var.toReplyName && isReplayToAll) {

                    EzAccessor.doReplySingleMessage(message.Id, currentUser);
                }
                else {

                    EzAccessor.doReplyTopic(message.Id, currentUser);
                }
            }

        });

        $('#achieve').click(function () {
            EzAccessor.doConfirmMessage(currentUser, message.Id);

        });

        chooseReciever();
    }

    function initPage() {
        var messageInfo = EzAccessor.getMessage();
        var curretnUser = EzAccessor.getCurrentUser();
        var replyList = EzAccessor.getReplyList();

        if (messageInfo.NeedConfirm) {
            EzTipsManager.addTipBox('#tip_nameList', 'tipNameList');
            EzTipsManager.showTipBox('tipNameList');

            g_Var.confirmNameList = EzAccessor.getConfirmNameList();
            g_Var.notConfirmNameList = EzAccessor.getNotConfirmNameList();

            showAffirmNameList(g_Var.confirmNameList);
            showNotAffirmNameList(g_Var.notConfirmNameList);
        }

        showMessage(messageInfo, curretnUser);
        showReply(replyList);

    }


    $(function () {

        initPage();
        initPageEvent();
        initTime();

    });
    
</script>
<!-- InstanceEndEditable -->

<body class="alt">

<div id="root">
    <div id="layoutRoot">    	
        <div id="bdw">
            <div id="bd">
        	<!-- InstanceBeginEditable name="pageContent" -->
                    <div id="title" class="ui-widget-header">
                        <h1>
                            消息——查看消息</h1>
                    </div>
                    <div id="contentw">
                        <div id="content">
                            <!--        <div class="imptTip">项目名称重复</div>
                    <div class="imptTip">项目名称重复</div>                    
                 -->
                            <div id="remind" class="ui-state-highlight" style="display: none; border: 2px solid #bfbfbf;">
                                <span>您尚未确认阅读该消息</span> <a id="achieve" style="color: Blue" href="#">▷立即确认</a>
                            </div>
                            <div style="margin: auto 20px;">
                                <div>
                                    <span id="messageTitle" style="font-size: 22px;"></span>
                                </div>
                                <span id="sendName" style="font-size: 16px; color: #2583AD;"></span><span id="deptName">
                                </span><span id="sendTime" style="font-size: 12px; color: Gray;"></span><span id="mark">
                                </span>
                                <div id="messageContent" style="font-size: 16px;">
                                </div>
                                <hr />
                            </div>
                            <div id="replyContainer" style="margin: auto 20px;">
                                <dl id="replyInfo" style="background-color: #F0F5F8; background-repeat: no-repeat;
                                    clear: both; word-wrap: break-word; min-height: 50px; margin-bottom: 2px; padding: 6px;
                                    width: 480px;">
                                </dl>
                                <hr />
                            </div>
                            <div id="textInfo" style="width: 600px; margin-top: 10px">
                                <div class="r">
                                    <!--<a name="reply"></a>-->
                                    <textarea id="replyContent" style="margin-left: 40px; height: 108px; width: 450px"
                                        name="p_replyContentContent"></textarea>
                                    <div style="margin-top: 10px;">
                                        <input style="margin-left: 44px; height: 28px; width: 80px;" type="button" id="btnSubmit"
                                            value="回复" />
                                        <input type="checkbox" id="isReplyToAll" />回复所有人
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="tipsw">
                        <div id="tips">
                        </div>
                    </div>
                    <div class="clearfloat">
                        <p>
                            &nbsp;
                        </p>
                        <p>
                            p</p>
                    </div>
                    <!-- InstanceEndEditable -->
			</div>
        </div>
    </div>
</div>
	<!-- InstanceBeginEditable name="pageFoot" -->
    <div id="tip_nameList" style="display: none;">
        <h3>
            已确认该消息的有</h3>
        <div id="tbl_affirmNameList">
        </div>
        <h3>
            他们还没有确认该消息</h3>
        <div id="tbl_notAffirmNameList">
        </div>
    </div>
    <!-- InstanceEndEditable -->
</body>
<!-- InstanceEnd --></html>
